<template>
	<view>
		<!-- 背景圖 -->
		<image class="backImage" src="https://app.yycjkb.cn/index/fujiajia/111.png" mode="widthFix"></image>

		<view class="container">
			<!-- 用戶信息 -->
			<view class="user-info">
				<view class="user-info-left" @tap="goTo('/pages/my/userInfo')">
					<image v-if="userInfo.luohan==1" class="user-info-image" src="/static/luohan.png" mode="aspectFill">
					</image>
					<image v-else class="user-info-image" :src="userInfo.avatar || '/static/default_avatar.png'"
						mode=""></image>
					<view class="user-info-name" v-if="hasLogin">
						<view class="name">{{userInfo.nickname}}</view>
						<view class="info">
							<view class="uid">UID:{{userInfo.id}} <text class="user-copy" @tap.stop="copy">复制</text>
							</view>
							<view class="contribute">贡献值:{{userInfo.contribution}}</view>
							<view class="contribute" v-if="(userInfo.user_level==2 || userInfo.user_level==3)">
								流量券：{{userInfo.total_commission}}</view>
						</view>
					</view>

					<view class="user-info-name" v-if="!hasLogin">
						<button class="login-btn" @tap="jumpTo('/pages/my/login', 'inside', false)"
							v-if="!hasLogin">点击登录</button>
					</view>
				</view>
				<view class="user-info-right">
					<!-- https://app.yycjkb.cn/index/fujiajia/xunzhang.png -->
					<image class="medal" :src="userInfo.user_fee_level" mode=""></image>
					<!-- <view class="post">
						<image class="gradient" src="https://app.yycjkb.cn/index/fujiajia/jianbian.png" mode="">
						</image>
						<view>{{userInfo.level_title}}</view>
					</view> -->
				</view>
			</view>

			<!-- 錢包 -->
			<view class="money-bag">
				<image class="money-bag-image" src="https://app.yycjkb.cn/index/fujiajia/jianbianback.png" mode="">
				</image>
				<view class="money-bag-content" @tap="jumpTo('/pages/my/balance/index', 'inside', true)">
					<view class="money-content-left">
						<view class="">
							<image src="https://app.yycjkb.cn/index/fujiajia/bag.png" mode=""></image>
							<text>我的钱包</text>
						</view>
						<view class="">
							<image src="#" mode=""></image>
							点击可查看我的钱包收益情况
						</view>
					</view>
					<view class="money-content-right">
						<view class="join-btn">
							立即进入
						</view>
					</view>
				</view>
			</view>

			<!-- 我的服務 -->
			<view class="mine-server">
				<view class="server-title">
					我的服务
				</view>
				<view class="server-content">
					<view class="server-item" @tap="goTo(item.url,item.title)" v-for="(item,index) in server">
						<view class="server-image-box">
							<image :src="item.image_url" mode="widthFix"></image>
						</view>
						<view class="server-item-title">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>

			<!-- 小助手 -->
			<view class="small-assistant">
				<view class="assistant-title">
					小助手
				</view>
				<view class="assistant-content">

					<view class="assistant-item" v-if="userInfo.shop_id"
						@tap="jumpTo('/pages/my/shop/home', 'inside', true)">
						<view class="assistant-image-box">
							<image src="https://app.yycjkb.cn/index/fujiajia/12.png" mode=""></image>
						</view>
						<view class="assistant-item-title">
							商家中心
						</view>
					</view>
					<view class="assistant-item" v-if="!userInfo.shop_id"
						@tap="jumpTo('/pages/my/shop/apply', 'inside', true)">
						<view class="assistant-image-box">
							<image src="https://app.yycjkb.cn/index/fujiajia/12.png" mode=""></image>
						</view>
						<view class="assistant-item-title">
							商家入驻
						</view>
					</view>
					<view class="assistant-item" v-if="userInfo.agent"
						@tap="jumpTo('/pages/my/agent/home', 'inside', true)">
						<view class="assistant-image-box">
							<image src="https://app.yycjkb.cn/index/fujiajia/17.png" mode=""></image>
						</view>
						<view class="assistant-item-title">
							创客中心
						</view>
					</view>
					<view class="assistant-item" v-if="!userInfo.agent"
						@tap="jumpTo('/pages/my/agent/apply', 'inside', true)">
						<view class="assistant-image-box">
							<image src="https://app.yycjkb.cn/index/fujiajia/13.png" mode=""></image>
						</view>
						<view class="assistant-item-title">
							申请拓店
						</view>
					</view>
					<view class="assistant-item" @tap="goTo(item.url,item.title)" v-for="(item, index) in assistant">
						<view class="assistant-image-box">
							<image :src="item.image_url" mode=""></image>
						</view>
						<view class="assistant-item-title">
							{{item.title}}
						</view>
					</view>
					<view class="assistant-item" @tap="tel()">
						<view class="assistant-image-box">
							<image src="https://app.yycjkb.cn/index/fujiajia/phone.png" mode=""></image>
						</view>
						<view class="assistant-item-title">
							400电话
						</view>
					</view>
					<view class="assistant-item" @tap="profit()">
						<view class="assistant-image-box">
							<image src="https://app.yycjkb.cn/index/fujiajia/12.png" mode=""></image>
						</view>
						<view class="assistant-item-title">
							会员迁移
						</view>
					</view>
					<view class="assistant-item" @tap="kefu('8080034')">
						<view class="assistant-image-box">
							<image src="https://app.yycjkb.cn/index/fujiajia/12.png" mode=""></image>
						</view>
						<view class="assistant-item-title">
							客服(一部)
						</view>
					</view>
					<view class="assistant-item" @tap="kefu('8080038')">
						<view class="assistant-image-box">
							<image src="https://app.yycjkb.cn/index/fujiajia/12.png" mode=""></image>
						</view>
						<view class="assistant-item-title">
							客服(二部)
						</view>
					</view>
					<view class="assistant-item" @tap="kefu('8080039')">
						<view class="assistant-image-box">
							<image src="https://app.yycjkb.cn/index/fujiajia/12.png" mode=""></image>
						</view>
						<view class="assistant-item-title">
							客服(三部)
						</view>
					</view>
					<view class="assistant-item" @tap="kefu('8080040')">
						<view class="assistant-image-box">
							<image src="https://app.yycjkb.cn/index/fujiajia/12.png" mode=""></image>
						</view>
						<view class="assistant-item-title">
							客服(四部)
						</view>
					</view>

				</view>
			</view>
		</view>

		<!-- 底部tabbar -->
		<CustomTabbar :currentIndex="2" />
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';

	import user from '@/api/user';
	import shop from '@/api/shop';
	import CustomTabbar from '@/newsPage/components/tabBar/index.vue'
	export default {
		components: {
			CustomTabbar
		},
		data() {
			return {
				tipStatus: false,
				modalName: 'Modal',
				VIP: 1,
				currentPage: 2,
				user_level: 0,
				total_commission: 0,
				selectIndex: 2,
				// userInfo: {},
				server: [{
						image_url: 'https://app.yycjkb.cn/index/fujiajia/order2.png',
						title: '我的订单',
						url: '/pages/my/balance/order_list'
					},
					{
						image_url: 'https://app.yycjkb.cn/index/fujiajia/fensi.png',
						title: '我的粉丝',
						url: '/pages/my/fans'
					},
					{
						image_url: 'https://app.yycjkb.cn/index/fujiajia/guanzhu.png',
						title: '我的关注',
						url: '/pages/my/follow'
					},
				],
				assistant: [
					// {
					// 	image_url: 'https://app.yycjkb.cn/index/fujiajia/12.png',
					// 	title: '商家入驻',
					// 	url: '/pages/my/shop/apply'
					// },
					// {
					// 	image_url: 'https://app.yycjkb.cn/index/fujiajia/17.png',
					// 	title: '申请拓店',
					// 	url: '/pages/my/agent/apply'
					// },
					{
						image_url: 'https://app.yycjkb.cn/index/fujiajia/13.png',
						title: '会员升级',
						url: '/pages/goods/list'
					},
					{
						image_url: 'https://app.yycjkb.cn/index/fujiajia/141.png',
						title: '邀请好友',
						url: '/pages/my/qrcode'
					},
					{
						image_url: 'https://app.yycjkb.cn/index/fujiajia/15.png',
						title: '服务协议',
						url: '/pages/my/agree'
					},
					{
						image_url: 'https://app.yycjkb.cn/index/fujiajia/16.png',
						title: '会员商城'
					}
				]
			};
		},
		// 组件内点击事件
		switchTab(index) {
			console.log('aaaa' + index)
			uni.$emit('tabChange', index)
			uni.reLaunch({
				url: this.list[index].pagePath
			})
		},
		// 页面监听
		mounted() {
			uni.$on('tabChange', (index) => {
				console.log('aaaa' + index)
				this.currentPage = index
			})
		},
		computed: {
			...mapState(['config', 'hasLogin', 'userInfo']),
		},
		onLoad(options) {
			if (options.q) {
				let qrUrl = decodeURIComponent(options.q)
				var tempId = this.getQueryString(qrUrl);
				console.log(qrUrl);
				console.log(tempId);
			}
			if (this.hasLogin) {
				this.$store.dispatch('user')
			}
			// 同步当前页面索引
			const routes = ['/pages/index/index', '/pages/category/category', '/pages/user/user']
			this.currentPage = routes.indexOf(this.$route.path)

		},
		onShow() {
			this.tipStatus = false;
			console.log(this.userInfo.user_fee_level)
			this.index()
			// if(this.userInfo){
			// 	this.VIP = 'https://www.yycjkb.cn/uploads/v' + this.userInfo.user_fee_level + '.png';
			// 	console.log(this.VIP)
			// }

		},
		onShareAppMessage(res) {
			return {
				path: this.share.path + '?outPutUid=' + this.userInfo.id,
				title: this.share.title,
				imageUrl: this.share.imageUrl
			}
		},

		methods: {


			joinchain() {
				uni.navigateTo({
					url: '/pages/my/shop/chain_join'
				})
			},
			tochain() {

				shop.chainCheck().then(res => {
					if (res.code === 1 && res.data > 0) {
						uni.navigateTo({
							url: '/pages/my/shop/chain'
						})
					} else {
						uni.showToast({
							title: '尚未开通权限'
						})
					}
				})


			},
			tostore(username) {

				if (!this.hasLogin) {
					uni.showModal({
						title: '请先登录'
					})
					return;
				}

				// #ifdef APP-PLUS
				plus.runtime.openURL('https://app.yycjkb.cn/dist/#/pages/user/auth/name?name=' + username)
				// #endif

				// #ifdef H5
				location.href = 'https://app.yycjkb.cn/dist/#/pages/user/auth/name?name=' + username
				// #endif
			},
			profit() {
				let that = this
				uni.showModal({
					title: '会员迁移',
					content: '',
					editable: true, //是否显示输入框
					placeholderText: '请输入手机号码', //输入框提示内容
					confirmText: '确认',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							if (!res.content) {
								return this.toast('电话号码不能为空')
							}
							that.changeProfit(res.content)
							console.log('输入的内容：', res.content);

						}
					}
				});

			},
			changeProfit(mobile) {

				user.changeprofile({
					change_mobile: mobile
				}).then(res => {
					uni.hideLoading();
					// if (res.code === 1) {
					// this.user_level = res.data.user.user_level
					return this.toast(res.msg)
					// }
				})
			},
			index() {
				this.inviteCode = this.$store.state.inviteCode;
				// 登录账号
				user.index().then(res => {
					uni.hideLoading();
					if (res.code === 1) {
						this.user_level = res.data.user.user_level
						this.total_commission = res.data.user.total_commission
					}
				})
			},
			/**
			 * 获取小程序二维码参数
			 * @param {String} scene 需要转换的参数字符串
			 */
			getQueryString: function(url) {
				var reg = new RegExp('(^|&|)([0-9]*$)', 'g')
				var r = url.substr(1).match(reg)
				if (r != null) {
					return r[0]
				}
				return null;
			},
			shareFriends() {
				this.tipStatus = !this.tipStatus;
			},
			remindMsg() {
				this.toast('敬请期待!');
			},
			oaLoad(a, b, c) {
				console.log(a, b, c)
			},
			oaLoadError(a, b, c) {
				console.log(a, b, c)
			},
			async login(res) {
				console.log(res);
				const userInfo = res.detail;
				if (userInfo.errMsg !== "getUserInfo:ok") {
					console.error(userInfo.errMsg)
					return;
				}

				const [loginErr, loginRes] = await uni.login({
					provider: 'weixin'
				});
				if (loginErr) {
					return this.toast(loginErr.errMsg);
				}
				const accountInfo = uni.getAccountInfoSync();
				console.log(accountInfo);
				const data = {
					platform: 'weapp',
					code: loginRes.code,
					encryptedData: userInfo.encryptedData,
					iv: userInfo.iv,
					appid: accountInfo.miniProgram.appId,
				};
				uni.showLoading({
					title: '登陆中~'
				})
				setTimeout(() => {
					uni.hideLoading()
				}, 5000)
				user.login({
					platform: data.platform,
					code: data.code,
					encryptedData: data.encryptedData,
					iv: data.iv,
					appid: data.appid,
					referrer_code: uni.getStorageSync('referrer_code'),
				}).then(res => {
					uni.hideLoading();
					if (res.code !== 1) {
						return this.toast(res.msg)
					}
					if (res.code === 1) {
						this.$store.commit('setHasLogin', true);
						this.$store.commit('setToken', res.data.userinfo.token);
						this.$store.commit('setUserInfo', res.data.userinfo);
						uni.navigateBack();
					}
				})
			},
			async goTo(path, name) {
				if (!this.hasLogin) {
					return;
				}

				if (name == '会员商城') {
					this.tostore(this.userInfo.username);
					return
				}

				if (!path) {
					this.toast('敬请期待!');
					return;
				}
				this.jumpTo(path)
			},
			async copy() {
				uni.setClipboardData({
					data: this.userInfo.id.toString()
				}).then(res => {
					const [error, data] = res;
					if (!error) {
						this.toast('复制成功');
					} else {
						console.error(error);
					}
				});
			},
			async kefu(to_id) {
				let that = this;
				// if (!this.config.contact) {
				// 	this.toast('暂不支持');
				// 	return;
				// }
				if (!this.hasLogin) {
					uni.showModal({
						title: '请先登录'
					})
					return;
				}
				// #ifdef APP-PLUS
				// https://app.yycjkb.cn/dist/#/pages/user/service?user_id=' + that.userInfo.id + '&to_id=' + to_id
				plus.runtime.openURL(
					'http://ct.yunhongbao.cn/index/index/home?visiter_id=&visiter_name=&avatar=&business_id=1&groupid=0&special=1&theme=7571f9'
					)
				// #endif

				// #ifdef H5
				location.href =
					'http://ct.yunhongbao.cn/index/index/home?visiter_id=&visiter_name=&avatar=&business_id=1&groupid=0&special=1&theme=7571f9'
				// #endif
			},
			async tel() {
				let that = this;
				// if (!this.config.contact) {
				// 	this.toast('暂不支持');
				// 	return;
				// }
				if (!this.hasLogin) {
					uni.showModal({
						title: '请先登录'
					})
					return;
				}
				uni.showModal({
					title: '联系客服', // 对话框的标题
					content: '客服上班时间:上午9:00～晚上9:00', // 对话框的内容
					showCancel: true, // 是否显示取消按钮
					cancelText: '取消', // 取消按钮的文字
					cancelColor: '#000000', // 取消按钮的文字颜色
					confirmText: '确定', // 确定按钮的文字
					confirmColor: '#3CC51F', // 确定按钮的文字颜色
					success: function(res) { // 回调函数
						if (res.confirm) { // 用户点击了确定
							console.log('用户点击确定');

							uni.makePhoneCall({
								phoneNumber: '4008390228'
							});



						} else if (res.cancel) { // 用户点击了取消
							console.log('用户点击取消');
						}
					},
					fail: function(err) { // 弹出框失败的回调
						console.log('弹出框失败：', err);
					},
					complete: function() { // 弹出框完成的回调
						console.log('弹出框完成');
					}
				});


			},
			goInvite() {
				// this.share.path = this.share.path + '?outPutUid=' + this.userInfo.id;
				this.shareFriends();
			}
		}
	}
</script>

<style lang="less" scoped>
	.user-copy {
		font-size: 12px;
		letter-spacing: 0;
		background: #F8ACA9;
		color: #fff;
		border-radius: 20px;
		padding: 2px 6px;
		margin-left: 10px;
	}

	.login-btn {
		margin-left: 20px;
		font-size: 30rpx;
		background: transparent;
		border: none;
		color: #fff;
		outline: none;
		padding: 0;

		// width: 30%;
		&::after {
			display: none;
		}
	}

	.backImage {
		width: 100%;
		position: absolute;
		left: 0%;
	}

	.container {
		padding-top: 140rpx;
		padding-bottom: 178rpx;
		width: 690rpx;
		margin: auto;
		position: relative;

		.user-info {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.user-info-left {
				display: flex;

				.user-info-image {
					width: 137rpx;
					height: 137rpx;
					border-radius: 100rpx;
				}

				.user-info-name {
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					padding: 10rpx 20rpx;

					.info {
						color: #666666;
						font-size: 24rpx;
						line-height: 140%;
					}
				}
			}

			.user-info-right {
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.medal {
					width: 150rpx;
					height: 146rpx;
					margin-bottom: -5rpx;
				}

				.post {
					width: 98rpx;
					height: 38rpx;
					position: relative;
					color: #fff;
					padding: 10rpx 0;

					.gradient {
						width: 100%;
						height: 100%;
						position: absolute;
						left: 50%;
						transform: translate(-50%, 0);
					}

					view {
						z-index: 16;
						position: relative;
						line-height: 38rpx;
						transform: scale(0.8) !important;
						font-size: 16rpx;
					}
				}
			}
		}

		.money-bag {
			padding-top: 30rpx;

			.money-bag-image {
				width: 100%;
				height: 126rpx;
				position: absolute;
			}

			.money-bag-content {
				position: relative;
				padding: 0 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 126rpx;

				.money-content-left {
					color: #FFF;

					view {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						padding: 4rpx 0;

						image {
							vertical-align: middle;
							margin-right: 10rpx;
							width: 34rpx;
							height: 34rpx;
						}
					}
				}

				.join-btn {
					background-color: #fff;
					padding: 10rpx 30rpx;
					border-radius: 100rpx;
					font-weight: 500;
				}
			}
		}

		.mine-server {
			width: 100%;
			background-color: #fff;
			height: 241rpx;
			border-radius: 24rpx;
			margin-top: 30rpx;
			padding: 20rpx 30rpx;

			.server-content {
				padding: 20rpx 0;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.server-item {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					.server-image-box {
						width: 80rpx;
						height: 80rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 72rpx;
						}
					}

					.server-item-title {
						padding: 10rpx 0;
						font-size: 24rpx;
					}
				}
			}
		}

		.small-assistant {
			width: 100%;
			background-color: #fff;
			border-radius: 24rpx;
			margin-top: 30rpx;
			padding: 20rpx 30rpx;

			.assistant-content {
				padding-top: 40rpx;
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 10px;
				place-items: center;
				width: 100%;

				.assistant-item {
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					text-align: center;
					margin-bottom: 20rpx;

					image {
						width: 58rpx;
						height: 58rpx;
					}

					.assistant-item-title {
						font-size: 24rpx;
						padding-top: 6rpx;
					}
				}
			}

		}
	}
</style>